<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>DevTools 调试页面</title>
    <script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="bg-gray-100">
    <div class="container mx-auto p-4">
        <h1 class="text-2xl font-bold mb-4">DevTools 调试页面</h1>
        
        <div class="mb-4">
            <button id="test-json" class="bg-blue-500 text-white px-4 py-2 rounded mr-2">测试JSON渲染器</button>
            <button id="test-sql" class="bg-green-500 text-white px-4 py-2 rounded">测试SQL渲染器</button>
        </div>
        
        <div id="content-area" class="bg-white p-4 rounded shadow min-h-[400px]">
            <!-- 工具内容将在这里显示 -->
        </div>
        
        <div class="mt-4">
            <h3 class="font-bold">调试信息:</h3>
            <pre id="debug-info" class="bg-gray-800 text-green-400 p-2 rounded text-sm"></pre>
        </div>
    </div>

    <!-- JavaScript 模块 -->
    <script src="assets/js/utils.js"></script>

    <!-- 工具逻辑模块 -->
    <script src="assets/js/tools/json-formatter.js"></script>
    <script src="assets/js/tools/sql-generator.js"></script>

    <!-- 工具渲染器模块 -->
    <script src="assets/js/renderers/json-formatter.js"></script>
    <script src="assets/js/renderers/sql-generator.js"></script>

    <!-- Feather Icons -->
    <script src="https://unpkg.com/feather-icons"></script>

    <script>
        // 捕获所有console.log输出
        const debugDiv = document.getElementById('debug-info');
        const originalLog = console.log;
        const originalWarn = console.warn;
        const originalError = console.error;
        
        function addDebugInfo(type, ...args) {
            const message = `[${type}] ${args.join(' ')}\n`;
            debugDiv.textContent += message;
            debugDiv.scrollTop = debugDiv.scrollHeight;
        }
        
        console.log = function(...args) {
            addDebugInfo('LOG', ...args);
            originalLog.apply(console, args);
        };
        
        console.warn = function(...args) {
            addDebugInfo('WARN', ...args);
            originalWarn.apply(console, args);
        };
        
        console.error = function(...args) {
            addDebugInfo('ERROR', ...args);
            originalError.apply(console, args);
        };

        // 测试渲染器
        document.addEventListener('DOMContentLoaded', () => {
            console.log('页面加载完成');
            console.log('JSONFormatterRenderer:', typeof window.JSONFormatterRenderer);
            console.log('SQLGeneratorRenderer:', typeof window.SQLGeneratorRenderer);
            
            document.getElementById('test-json').addEventListener('click', () => {
                console.log('测试JSON渲染器...');
                const contentArea = document.getElementById('content-area');
                
                if (window.JSONFormatterRenderer) {
                    try {
                        const html = window.JSONFormatterRenderer.getHTML();
                        contentArea.innerHTML = html;
                        window.JSONFormatterRenderer.init();
                        
                        // 初始化图标
                        setTimeout(() => {
                            if (typeof feather !== 'undefined') {
                                feather.replace();
                            }
                        }, 100);
                        
                        console.log('JSON渲染器测试成功');
                    } catch (error) {
                        console.error('JSON渲染器测试失败:', error);
                    }
                } else {
                    console.error('JSONFormatterRenderer 不存在');
                }
            });
            
            document.getElementById('test-sql').addEventListener('click', () => {
                console.log('测试SQL渲染器...');
                const contentArea = document.getElementById('content-area');
                
                if (window.SQLGeneratorRenderer) {
                    try {
                        const html = window.SQLGeneratorRenderer.getHTML();
                        contentArea.innerHTML = html;
                        window.SQLGeneratorRenderer.init();
                        
                        // 初始化图标
                        setTimeout(() => {
                            if (typeof feather !== 'undefined') {
                                feather.replace();
                            }
                        }, 100);
                        
                        console.log('SQL渲染器测试成功');
                    } catch (error) {
                        console.error('SQL渲染器测试失败:', error);
                    }
                } else {
                    console.error('SQLGeneratorRenderer 不存在');
                }
            });
        });
    </script>
</body>
</html>